import React, {useEffect, useState} from 'react';
import S from '../index.less';
import * as service from '../service'
import classNames from "classnames";

const Pane = (props) => {
  const {className} = props;
  const [line, setLine] = useState([])
  const [markers, setMarkers] = useState([])
  const [leftWidth, setLeftWidth] = useState(0);
  const [rightWidth, setRightWidth] = useState(0);

  // 【方法】获取线的位置
  const getLine = async () => {
    // const line = await service.linePosition()
    // setLine(line.data)
    // console.log(line.data)
  }
  const lineStyle = {top: 30, height: 8, backgroundColor: 'red'};

  const posMarkerPos = (marker) => {
    //
    return {top: 5, left: 10};
  }


  const posMarkerClassName = (marker) => {
    //
    return '';
  }

  useEffect(() => {
    if (leftWidth >= 0 && leftWidth < 100) {
      setTimeout(() => {
        setLeftWidth(leftWidth + 1);
      }, 1000)
    } else {
      setLeftWidth(0);
    }
  }, [leftWidth]);
  useEffect(() => {
    getLine().then()
    setLeftWidth(leftWidth + 1);
  }, []);
  return (
    // css .centerShedPath
    // 小车路径图
    <div className={className} style={{display: 'flex'}}>
      <div style={{...lineStyle, width: leftWidth + '%'}}></div>
      <div>小车</div>
      <div style={{...lineStyle, width: rightWidth + '%'}}></div>

      {
        markers.map((marker, index) => (
          <div key={index} className={posMarkerClassName(marker)} style={{...posMarkerPos(marker)}}></div>
        ))
      }

      {/*<div className={classNames(S.linePosition, style1)}/>*/}
      {/*<div className={classNames(S.linePosition, style2)}/>*/}

      {/*<div className={S.linePosition} style={{}}/>*/}

      {/*<div className={S.firstLine}/>*/}
      {/*<div className={S.secondLine}/>*/}
      {/*<div className={S.oneFlagGroup}>*/}
      {/*  <div className={S.oneFlag}/>*/}
      {/*  <div className={S.oneFlag}/>*/}
      {/*  <div className={S.oneFlag}/>*/}
      {/*  <div className={S.oneFlag}/>*/}
      {/*  <div className={S.oneFlag}/>*/}
      {/*</div>*/}
      {/*<div className={S.twoFlagGroup}>*/}
      {/*  <div className={S.twoFlag}/>*/}
      {/*  <div className={S.twoFlag}/>*/}
      {/*  <div className={S.twoFlag}/>*/}
      {/*  <div className={S.twoFlag}/>*/}
      {/*  <div className={S.twoFlag}/>*/}
      {/*</div>*/}
      {/*<div className={S.carPosition}/>*/}
    </div>
  );
};

export default Pane;